<template>
  <div class="adminqianming">
    <admin_top></admin_top>
    
    <div style="padding: 0 20px;">
      <div style="margin-bottom: 30px;">
        <el-button type="danger" style="margin-right: 40px;" @click="openjk(1)">新建接口</el-button>
        <el-input style="width: 200px;" v-model="all.name" placeholder="接口名称"></el-input>
        <el-input style="width: 200px;" v-model="all.url" placeholder="提单地址"></el-input>
        <el-button @click="search" type="danger">查询</el-button>
      </div>
      <el-table :data="tableData" style="text-align: center;" align="center" border >
        <el-table-column label="接口名称" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.c_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="运营商" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.operator }}</span>
          </template>
        </el-table-column>
        <el-table-column label="所属地区" align="center">
          <template slot-scope="scope">
            <div>
              <div v-for="(item,index) in scope.row.attribution" :key="index">
                {{ item[0] }}-{{ item[1] }}-{{ item[2] }}
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="提单方式" align="center">
          <template slot-scope="scope">
            <el-popover
              placement="top-start"
              trigger="hover"
              >
              <div>
                <span slot="reference" v-html="huanhang(scope.row.submit_type)"></span>
              </div>
              <!-- <el-button >hover 激活</el-button> -->
              <span class="t_overfont" slot="reference" v-html="huanhang(scope.row.submit_type)"></span>
            </el-popover>
            
            <div style="text-align: center;font-size: 18px;color: #409EFF;cursor: pointer;">
              <i @click="edit(1,'提单方式',scope.row)" class="el-icon-edit-outline"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="查单方式" align="center">
          <template slot-scope="scope">
            <el-popover
              placement="top-start"
              trigger="hover"
              >
              <div>
                <span slot="reference" v-html="huanhang(scope.row.query_type)"></span>
              </div>
              <!-- <el-button >hover 激活</el-button> -->
              <span class="t_overfont" slot="reference" v-html="huanhang(scope.row.query_type)"></span>
            </el-popover>
            <div style="text-align: center;font-size: 18px;color: #409EFF;cursor: pointer;">
              <i @click="edit(2,'查单方式',scope.row)" class="el-icon-edit-outline"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="发货信息" align="center">
          <template slot-scope="scope">
            <el-popover
              placement="top-start"
              trigger="hover"
              >
              <div>
                <span slot="reference" v-html="huanhang(scope.row.delivery)"></span>
              </div>
              <!-- <el-button >hover 激活</el-button> -->
              <span class="t_overfont" slot="reference" v-html="huanhang(scope.row.delivery)"></span>
            </el-popover>
            <div style="text-align: center;font-size: 18px;color: #409EFF;cursor: pointer;">
              <i @click="edit(3,'发货信息',scope.row)" class="el-icon-edit-outline"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="选号信息" align="center">
          <template slot-scope="scope">
            <el-popover
              placement="top-start"
              trigger="hover"
              >
              <div>
                <span slot="reference" v-html="huanhang(scope.row.query_mobile)"></span>
              </div>
              <!-- <el-button >hover 激活</el-button> -->
              <span class="t_overfont" slot="reference" v-html="huanhang(scope.row.query_mobile)"></span>
            </el-popover>
            <div style="text-align: center;font-size: 18px;color: #409EFF;cursor: pointer;">
              <i @click="edit(4,'选号信息',scope.row)" class="el-icon-edit-outline"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="激活信息" align="center">
          <template slot-scope="scope">
            <el-popover
              placement="top-start"
              trigger="hover"
              >
              <div>
                <span slot="reference" v-html="huanhang(scope.row.active)"></span>
              </div>
              <!-- <el-button >hover 激活</el-button> -->
              <span class="t_overfont" slot="reference" v-html="huanhang(scope.row.active)"></span>
            </el-popover>
            <div style="text-align: center;font-size: 18px;color: #409EFF;cursor: pointer;">
              <i @click="edit(5,'激活信息',scope.row)" class="el-icon-edit-outline"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="在网信息" align="center">
          <template slot-scope="scope">
            <el-popover
              placement="top-start"
              trigger="hover"
              >
              <div>
                <span slot="reference" v-html="huanhang(scope.row.online)"></span>
              </div>
              <!-- <el-button >hover 激活</el-button> -->
              <span class="t_overfont" slot="reference" v-html="huanhang(scope.row.online)"></span>
            </el-popover>
            <div style="text-align: center;font-size: 18px;color: #409EFF;cursor: pointer;">
              <i @click="edit(6,'在网信息',scope.row)" class="el-icon-edit-outline"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="接口地址" align="center">
          <template slot-scope="scope">
            <el-popover
              placement="top-start"
              trigger="hover"
              >
              <div>
                <span slot="reference" v-html="huanhang(scope.row.api_url)"></span>
              </div>
              <!-- <el-button >hover 激活</el-button> -->
              <span class="t_overfont" slot="reference" v-html="huanhang(scope.row.api_url)"></span>
            </el-popover>
            <div style="text-align: center;font-size: 18px;color: #409EFF;cursor: pointer;">
              <i @click="edit(7,'接口地址',scope.row)" class="el-icon-edit-outline"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="备注信息" align="center">
          <template slot-scope="scope">
            <span><el-button  type="text" @click="checkmsg(scope.row.remark)">查看</el-button></span>
            <div style="text-align: center;font-size: 18px;color: #409EFF;cursor: pointer;">
              <i @click="edit(8,'备注信息',scope.row)" class="el-icon-edit-outline"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="接口文档" align="center">
          <template slot-scope="scope">
            <div v-for="(item,index) in scope.row.api_file" :key="index">
              <div>{{ item.name }}</div>
              <el-button style="color: #FF00FF;" @click="xiazai(item.url,item.name)" type="text" >已上传的点击可下载</el-button>
            </div>
            <div @click="upfile(scope.row)">
              <file  ref="chuantu"  @getimg="getimg"></file>
            </div>
            
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button  type="text" @click="openjk(2,scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center;margin-top: 10px;padding-bottom: 10px;">
        <el-pagination
          @current-change="pagechange"
          background
          layout="prev, pager, next"
          :page-size="all.page_size"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <!-- 新建 -->
    <el-dialog
      :title="nowtype==1?'新建对接接口':'修改对接接口'"
      :visible.sync="isshowcreatejk"
      width="500px"
      :close-on-click-modal="false">
      <div>
        <el-input style="width: 100%;" v-model="jkname" placeholder="接口名称"></el-input>
        <el-cascader style="width: 100%;margin-top: 25px;margin-bottom: 25px;" @change="changeaddress"   v-model="citys" :props="props" :options="citylist"></el-cascader>
        <el-select style="width: 100%;" v-model="yysvalue" placeholder="运营商">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div style="text-align: center;margin-top: 35px;">
        
        <el-button v-if="nowtype==1" type="danger" round @click="surecreate">确认创建</el-button>
        <el-button v-if="nowtype==2" type="danger" round @click="surecreate">确认修改</el-button>
      </div>
    </el-dialog>
    <!-- 备注 -->
    <el-dialog
      title="备注"
      :visible.sync="isshowremark"
      width="500px">
      <div v-html="huanhang(remarkcon)"></div>
      <div style="text-align: center;">
        <el-button type="primary" @click="isshowremark = false">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog
      :title=choosename
      center="true"
      :visible.sync="isshowedit"
      :close-on-click-modal="false"
      width="700px">
      <el-input
        style="width:100%"
        type="textarea"
        :rows="10"
        placeholder="请输入内容"
        v-model="textarea">
      </el-input>
      <div style="text-align: center;margin-top: 20px;">
        <el-button type="danger" @click="savebtn" round>保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import admin_top from './top.vue';
  import { provinceAndCityDataPlus, CodeToText, TextToCode,regionDataPlus,regionData} from 'element-china-area-data'
  import axios from 'axios'
  import file from "../zujian/file.vue";
  export default {
    components: {
      admin_top,file
    },
    name: 'adminjkqdgl',
    data() {
      return {
        all: {
          page_size: 20,
          page: 1,
          name:'',
          url:''
        },
        tableData: "",
        total:0,
        isshowcreatejk:false,
        options: [],
        citylist:regionData,
        citys:[],
        jkname:'',
        yysvalue:'',
        nowtype:null,
        isshowremark:false,
        choosetype:null,
        choosename:'',
        isshowedit:false,
        textarea:'',
        props: { multiple: true },
        remarkcon:'',
        chooseid:''
        
      }
    },
    watch: {

    },
    computed: {

    },
    created() {
      //获取全部
      this.getlist()
      //运营商
      this.getyyslist()
    },
    methods: {
  
      //搜索
      search(){
        this.all.page=1
        //获取全部
        this.getlist()
        
      },
      //获取全部
      getlist: function() {
        var that = this
        axios.post('/api/plan-market/admin/channel/remark/list',this.all)
          .then(response => {
            if (response.data.msg.code == 0) {
              console.log(response.data)
              this.tableData = response.data.data.data
              this.total = response.data.data.total
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //翻页
      pagechange(val){

        this.all.page = val
        this.getlist()
      },
      //运营商
      getyyslist(){
        axios.get('/api/plan-market/admin/operator/list')
          .then(response => {
            if (response.data.msg.code == 0) {
              console.log('运营商')
              
              var arr = []
              for(var x=0;x<response.data.data.length;x++){
                arr.push({'value':response.data.data[x],'label':response.data.data[x]})
              }
              this.options = arr
              console.log(arr)
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //新建,编辑
      openjk(type,row){
        this.nowtype = type
        this.isshowcreatejk = true
        if(type==1){
          //新建
          this.citys = []
          this.jkname = ''
          this.yysvalue = ''
        }else if(type==2){
          this.chooseid=row.channel_config_id
          //编辑
          var dq = row.attribution

          var cityarr = []
          for(var x=0;x<dq.length;x++){
            var linarr = []
            linarr.push(TextToCode[dq[x][0]].code)
            linarr.push(TextToCode[dq[x][0]][dq[x][1]].code)
            linarr.push(TextToCode[dq[x][0]][dq[x][1]][dq[x][2]].code)
            cityarr.push(linarr)
          }
          console.log(cityarr)
          this.citys = cityarr
          this.jkname = row.c_name
          this.yysvalue = row.operator

        }
      },
      //确认创建
      surecreate(){
        console.log('编码转文字')
        
        var cityarr = []
        for(var x=0;x<this.citys.length;x++){
          var linarr = []
          for(var y=0;y<this.citys[x].length;y++){
            linarr.push(CodeToText[this.citys[x][y]])
          }
          cityarr.push(linarr)
        }

        console.log(cityarr)



        if(this.nowtype == 1){
          //新增
          axios.post('/api/plan-market/admin/channel/create',{
            name:this.jkname,
            operator:this.yysvalue,
            attribution:cityarr,
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.isshowcreatejk = false
              this.$message({
                message: '添加成功',
                type: 'success'
              });
              this.all.page=1
              //获取全部
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
          
        }else if(this.nowtype == 2){
          //编辑
          axios.post('/api/plan-market/admin/channel/remark/update',{
            channel_config_id:this.chooseid,
            name:this.jkname,
            operator:this.yysvalue,
            attribution:cityarr,
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.isshowcreatejk = false
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              this.all.page=1
              //获取全部
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
        }
        
      },
      //选择省市区
			changeaddress:function(v){
        console.log(v)
				// this.form.address_province = CodeToText[v[0]],
				// this.form.address_city = CodeToText[v[1]]
			},
      //查看备注
      checkmsg(remark){
        this.isshowremark = true
        this.remarkcon = remark
      },
      upfile(row){
        this.chooseid = row.channel_config_id
      },
      getimg:function(img){
        console.log('得到链接')
        console.log(img)
        axios.post('/api/plan-market/admin/channel/remark/update',{
          channel_config_id:this.chooseid,
          api_file:img
        })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.isshowedit = false
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              this.all.page=1
              //获取全部
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //修改内容
      edit(type,name,row){
        this.chooseid = row.channel_config_id
        this.choosetype = type
        this.choosename = name
        this.isshowedit = true
        if(type==1){
          this.textarea = row.submit_type
        }
        if(type==2){
          this.textarea = row.query_type
        }
        if(type==3){
          this.textarea = row.delivery
        }
        if(type==4){
          this.textarea = row.query_mobile
        }
        if(type==5){
          this.textarea = row.active
        }
        if(type==6){
          this.textarea = row.online
        }
        if(type==7){
          this.textarea = row.api_url
        }
        if(type==8){
          this.textarea = row.remark
        }
      },
      //保存
      savebtn(){
        console.log(this.textarea)
        if(this.choosetype==1){
          var obj={
            channel_config_id:this.chooseid,
            submit_type:this.textarea
          }
        }
        if(this.choosetype==2){
          var obj={
            channel_config_id:this.chooseid,
            query_type:this.textarea
          }
        }
        if(this.choosetype==3){
          var obj={
            channel_config_id:this.chooseid,
            delivery:this.textarea
          }
        }
        if(this.choosetype==4){
          var obj={
            channel_config_id:this.chooseid,
            query_mobile:this.textarea
          }
        }
        if(this.choosetype==5){
          var obj={
            channel_config_id:this.chooseid,
            active:this.textarea
          }
        }
        if(this.choosetype==6){
          var obj={
            channel_config_id:this.chooseid,
            online:this.textarea
          }
        }
        if(this.choosetype==7){
          var obj={
            channel_config_id:this.chooseid,
            api_url:this.textarea
          }
        }
        if(this.choosetype==8){
          var obj={
            channel_config_id:this.chooseid,
            remark:this.textarea
          }
        }
        axios.post('/api/plan-market/admin/channel/remark/update',obj)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.isshowedit = false
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              this.all.page=1
              //获取全部
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //下载
      xiazai(url,name){
        console.log(url)
        const a = document.createElement('a');
        a.setAttribute('download', name);
        a.setAttribute('href',url );
        a.click();
      },
      //换行
      huanhang(str){
        return str.replace(/\n/g,'<br/>');
      }

    },

  }
</script>

<style scoped>
  .adminqianming {
    background: #EAEAEA;
    min-height: 100vh;
    padding: 0px;
  }
  .t_overfont{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;    /* 数值代表显示几行 */
    -webkit-box-orient: vertical;
    word-break: break-all;
  }
</style>
